import React from 'react';
import './nextMenu.scss';
import { Route } from 'react-router-dom';
import { Link, withRouter } from 'react-router-dom';//地址库

import cookie from 'react-cookies';
import BMap from 'BMap';
import moment from 'moment';

import { List } from 'antd';

class nextMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeUlId:'1',
            data:[
                {
                  title: ' 西沟煤炭贸易站台 ',
                  id:'1',
                  detail:'2进2出 - 4车道'
                },
                {
                  title: ' 青岛煤炭贸易站台 ',
                  id:'2',
                  detail:'2进2出 - 4车道'
                },
                {
                  title: ' 上海煤炭贸易站台3 ',
                  id:'3',
                  detail:'2进2出 - 4车道'
                },
                {
                  title: ' 聊城煤炭贸易站台4 ',
                  id:'4',
                  detail:'2进2出 - 4车道'
                },
              ],
        }
    }

    componentDidMount() {
        // console.log(this.props)
        
    }

    ulClick = (id) => {
        
        this.setState({
            activeUlId:id
        })
        // this.props.history.push({ pathname: `/index/dataCentre/barrierGateDetail`, state: { d_id: id } })
    }

    render() {
        const { data,activeUlId } = this.state;
        return (
            <div className="CloudArrangingmonitor_barrierGateData" id="nextmenu">
                <div className="nav_bar_child_list">
                    <div className="title">项目名称</div>
                    <List
                        itemLayout="horizontal"
                        dataSource={data}
                        renderItem={item => (
                        <List.Item>
                            <div className={activeUlId == item.id ? 'ulDot' : 'ulDot2'}></div>
                            <List.Item.Meta
                            className="ulTitle"
                            onClick={this.ulClick.bind(this,item.id)}
                            title={<Link 
                                to={
                                    {pathname:`/index/dataCentre/barrierGateData/barrierGateDetail`,search:`${item.id}`}
                                    }>{item.title}</Link>}
                            description={item.detail}
                            />
                            
                           {activeUlId == item.id ? <img className="jiantou" src={require('../../assets/img/ulblue.png')} /> : <img className="jiantou" src={require('../../assets/img/grey.png')} />}
                        </List.Item>
                        
                        )}
                    />
                   
                </div>
                
            </div>
        )
    }
}

export default nextMenu;